*{
    margin: 0;
    padding: 0;
}
.main-left-li-active{
    color: rgb(114, 114, 236);
    background-color: rgb(187, 223, 238);
    border-right: 1px solid rgb(114, 114, 236);
}
body{
    background-color: #eee;
    width: 100%;
    min-width: 600px;
    header{
        width: 100%;
        box-sizing: border-box;
        padding: 0 20px;
        background-image: url(../../images/header-bg.png);
        background-size: cover;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        #hd-left{
            display: flex;
            align-items: center;
            #logo{
                display: flex;
                flex-wrap: wrap;
                width: 69px;
                justify-content: center;
                box-sizing: border-box;
                padding: 7px 0;
                #hd-logo-top{
                width: 30px;
                height: 30px;
                }
                #hd-logo-down{
                    width: 69px;
                    height: 15px;
                }
            }
           
            span{
                padding-left: 50px;
                font-size: 14px;
                color: #fff;
                font-weight: 800;
            }
        }
        #hd-right{
            width: 20%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            #hd-touxiang,#hd-news,#hd-setting{
            width: 10%;
            margin: 0 10px;
            }
            #hd-chose{
                position: relative;
                #hd-select{
                background-color: transparent;
                outline: none;
                border: none;
                color: #fff;
                }
                #xialacaidan{
                    list-style: none;
                    position: absolute;
                    display: flex;
                    flex-wrap: wrap;
                    top: 37px;
                    left: -35px;
                    color: #000;
                    li{
                        cursor: pointer;
                        background-color: #fff;
                        width: 170px;
                        height: 50px;
                        line-height: 43px;
                        font-size: 14px;
                        padding-left: 30px;
                        box-sizing: border-box;
                    }
                }
            }
        }
        
        
    }
    main{
        width: 100%;
        display: flex;
        justify-content: space-between;
        #main-left{
            background-color: #fff;
            width: 230px;
            ul{
                text-align: center;
                border-bottom:1px solid #ddd;
                font-size: 14px;
                cursor: default;
                #main-left-sy{
                    padding-right: 33%;
                }
                li{
                    height: 50px;
                    line-height: 50px;
                    &:not(:nth-of-type(1)):hover{
                        color: rgb(114, 114, 236);
                        background-color: rgb(187, 223, 238);
                        border-right: 1px solid rgb(114, 114, 236);
                    }
                }
                li:nth-of-type(1){
                    // color: red;
                    box-sizing: border-box;
                    padding-right: 20%;
                    img{
                        vertical-align: middle;
                        margin-right: 10px;
                    }
                }
            }
            
        }
        #main-right{
            flex-grow: 1;
            height: 1000px;
            background-color: skyblue;
            margin-left: 1%;
        }
    }
}